<template>
	<view id="wrap">
		<u-divider text="页面"></u-divider>
		<u-grid :border="false" @click="click">
			<u-grid-item v-for="(viewListItem,viewListIndex) in viewList" :key="viewListIndex">
				<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="viewListItem.name" :size="22"></u-icon>
				<text class="grid-text">{{viewListItem.title}}</text>
			</u-grid-item>
		</u-grid>

		<u-divider text="方法"></u-divider>
		<u-grid :border="false" @click="clickMe">
			<u-grid-item v-for="(methodListItem,methodListIndex) in methodList" :key="methodListIndex">
				<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="methodListItem.name" :size="22"></u-icon>
				<text class="grid-text">{{methodListItem.title}}</text>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				viewList: [{
						name: 'grid',
						title: '登录',
						url: '/pages/tabbar/login'
					},
					{
						name: 'grid',
						title: '个人信息',
						url: '/pages/my/pages/information'
					},
					{
						name: 'grid',
						title: '客服中心',
						url: '/pages/my/pages/service'
					},
					{
						name: 'grid',
						title: '分割线',
						url: '/pages/example/pages/parting'
					},
					{
						name: 'grid',
						title: '发票',
						url: '/pages/example/pages/invoice'
					},
					{
						name: 'grid',
						title: '地图',
						url: '/pages/example/pages/map'
					},
					{
						name: 'grid',
						title: '按钮',
						url: '/pages/example/pages/button'
					},
					{
						name: 'grid',
						title: '搜索框',
						url: '/pages/example/pages/search'
					},
					{
						name: 'grid',
						title: '左右滑动',
						url: '/pages/example/pages/slide'
					},
					{
						name: 'grid',
						title: '优惠券',
						url: '/pages/example/pages/coupon'
					},
					{
						name: 'grid',
						title: '科普',
						url: '/pages/example/pages/popularScience'
					},
					{
						name: 'grid',
						title: '公告',
						url: '/pages/example/pages/announcement'
					},
					{
						name: 'grid',
						title: 'tab切换',
						url: '/pages/example/pages/tabs'
					},
					{
						name: 'grid',
						title: '无缝滚动',
						url: '/pages/example/pages/noSeamRoll'
					},
					{
						name: 'grid',
						title: '缺省',
						url: '/pages/example/pages/empty'
					},
					{
						name: 'grid',
						title: '系统消息',
						url: '/pages/example/pages/system'
					},{
						name: 'grid',
						title: '瀑布流',
						url: '/pages/example/pages/waterfall'
					},
					{
						name: 'grid',
						title: '二维码',
						url: '/pages/example/pages/poster'
					},
					{
						name: 'grid',
						title: '商城',
						url: '/pages/example/pages/noSeamRoll'
					}
				],
				methodList: [{
					name: 'grid',
					title: '扫码',
					url: () => {
						uni.scanCode({
							success: (res) => {
								// 扫码成功后处理
							},
						});
					},
				},{
					name: 'grid',
					title: '跳转小程序',
					url: () => {
						// uni.navigateToMiniProgram({
						// 	appId: '',
						// 	path: '',
						// 	//develop开发版；trial体验版；release正式版
						// 	envVersion: 'release',
						// 	success(res) {
						// 		// 打开成功
						// 		console.log("跳转小程序成功！", res);
						// 	},
						// 	fail(err) {
						// 		console.log("跳转小程序失败", err);
						// 	}
						// })
					},
				},{
					name: 'grid',
					title: '预览图片',
					url: () => {
						uni.previewImage({
							urls: '',//需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
							current: '', // 当前显示图片的http链接，默认是第一个
							success: function(res) {},
							fail: function(res) {},
							complete: function(res) {},
						})
					},
				}]
			}
		},

		methods: {
				
			// 页面点击
			click(index) {
				let url = this.viewList[index].url
				this.skip(url)
			},
			// 方法点击
			clickMe(index) {
				let url = this.methodList[index].url || ''
				if (!url) return
				this.skip(url)
			},
			skip(url) {
				typeof url === "string" && uni.$u.route(url);
				typeof url === "function" && url();
			}
		},
		onShow() {
			// 设置转发分享
			uni.$u.mpShare = {
				title: '', // 默认为小程序名称，可自定义
				path: '', // 默认为当前页面路径，一般无需修改，QQ小程序不支持
				// 分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。
				// 支持PNG及JPG，默认为当前页面的截图
				imageUrl: ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	#wrap {
		padding: 20rpx;

		.grid-text {
			font-size: 14px;
			color: #909399;
			padding: 10rpx 0 20rpx 0rpx;
			/* #ifndef APP-PLUS */
			box-sizing: border-box;
			/* #endif */
		}
	}
</style>